import Taro from '@tarojs/taro'
import React, { useState, useEffect } from 'react'
import { View, Image } from '@tarojs/components'
import imgList from '@components/imgList'
import dayjs from '@src/utils/dateTimeUtil'
import { useSelector } from 'react-redux';

import './subPage.scss'

function ChaRoom({data = {},onMsgChange}) {
    
    const [msgList, setMsgList] = useState([
        {msg: '哈喽！', user: {nickName: '内马尔', avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=664281491,947966788&fm=26&gp=0.jpg'},time: dayjs().valueOf()},
        {msg: '你好啊', user: {nickName: 'Messi', avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596963031803&di=d71dc415e4d6e65b041df624a0591435&imgtype=0&src=http%3A%2F%2Fimgsa.baidu.com%2Fexp%2Fw%3D500%2Fsign%3Db90b706181b1cb133e693c13ed5556da%2Fbba1cd11728b471034b1e642cfcec3fdfd0323a5.jpg'},time: dayjs().valueOf()},
        {msg: '大家好😝', user: {nickName: 'Ronalde', avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2718992591,1608277910&fm=15&gp=0.jpg'},time: dayjs().valueOf()}
    ])

    const newMsg = useSelector(({msg}) => msg.newMsg);

    useEffect(() =>{
        console.log(`effect ----the new msg is ${newMsg}`)
        if(newMsg){
            msgList.push({msg: newMsg, user: {nickName: 'me', avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2299227825,2846025458&fm=26&gp=0.jpg'},time: dayjs().valueOf()})
        //     setMsgList(msgList)
            onMsgChange(`msg-${msgList.length - 1}`)
        }
    },[newMsg])

    return <View className='scroll'>
            {
                msgList.map((item,index) =>
                    <View id={`msg-${index}`} key={index} className={`msgItem${item.user.nickName == 'me' ? ' right' : ''}`}>
                        {
                            item.user.nickName != 'me' &&
                            <View className='avatar'>
                                <Image src={item.user.avatar} mode='aspectFit'/>
                            </View>
                        }
                        <View className='content'>
                            <View className='nickName'>
                                {
                                    item.user.nickName
                                }
                            </View>
                            <View className={`msg${item.user.nickName == 'me' ? ' self' : ''}`}>
                                {
                                    item.msg
                                }
                            </View>
                        </View>
                        {
                            item.user.nickName == 'me' &&
                            <View className='avatar'>
                                <Image src={item.user.avatar} mode='aspectFit'/>
                            </View>
                        }
                    </View>
                )
            }
        </View>
}

export default ChaRoom
